<cfcomponent output="false">
	
	<!--- --->

	<cffunction name="renderSidebar" access="public" output="true" returntype="string">
		
		<cfset var local = {} />
			
		<cfsavecontent variable="local.result">
			<div id="module-left-important-div" class="module-left-element moveable">
				<div class="important-contents">
					#$.run.it('importantView.renderImportant')#
				</div>
				
				<div class="module-left-element-basebar"></div>
			</div>
		</cfsavecontent>

		<cfreturn local.result />
	
	</cffunction>

	<!--- --->
	
	<cffunction name="renderImportant" access="public" output="true" returntype="string">
		
		<cfset var local = {} />
		
		<cfset local.important = $.run.it('importantService.getImportant',{lastweek=false}) />
				
		<cfset local.incomplete = [] />
		<cfset local.complete = [] />
		
		<cfloop query="local.important">
			<cfset local.thisImportant = {
				id=local.important.id,
				name=local.important.name,
				completed_on=local.important.completed_on
			} />
			
			<cfif local.important.complete>
				<cfset arrayAppend(local.complete,local.thisImportant) />
			<cfelse>
				<cfset arrayAppend(local.incomplete,local.thisImportant) />
			</cfif>
		</cfloop>
		
		<cfsavecontent variable="local.result">
			<div class="module-left-title"><i style="font-size:17px;" class="fa fa-bolt"></i>Important This Week</div>
			<ul class="checklist">
				<div class="important-message<cfif local.important.recordcount gt 0> hidden</cfif>">Track what needs to get done this week.</div>
				<!--- display incomplete first --->
				<cfloop array="#local.incomplete#" index="local.i" item="local.item">
					<li importantID="#local.item.id#" complete="true" class="open">
						<i class="fa fa-times" onclick="Important.remove(this);"></i>
						<i style="font-size:19px;" class="fa fa-square-o check-important" value="#local.item.id#"></i>
						<span class="important-name drag">#local.item.name#</span>
						<!--- <i class="fa fa-calendar" title="Schedule it. (upcoming feature)"></i> --->
					</li>
				</cfloop>
				<!--- display complete --->
				<cfloop array="#local.complete#" index="local.i" item="local.item">
					<li importantID="#local.item.id#" complete="false" class="done">
						<i class="fa fa-times" onclick="Important.remove(this);"></i>
						<i style="font-size:19px;" class="fa fa-check-square-o check-important" value="#local.item.id#"></i>
						<span class="important-name">#local.item.name#</span>
					</li>
				</cfloop>
			</ul>
			
			<input name="new_important" value="" style="margin-top:3px;width:150px;" placeholder="Add Something Important" validate="maxLength500" /><i class="fa fa-plus-square important-add" onclick="Important.saveImportant();"></i>
			<a id="important-add-more" class="hidden" onclick="javascript:Important.showAddMore();">add more?</a>
			<div id="important-add-more2" class="hidden">Try to keep this list concise and attainable.</div>
			
			#$.run.it('importantView.renderImportantLastWeek')#
		</cfsavecontent>

		<cfreturn local.result />
	
	</cffunction>

	<!--- --->
	
	<cffunction name="renderImportantLastWeek" access="public" output="true" returntype="string">
		
		<cfset var local = {} />
		
		<cfset local.lastWeek = $.run.it('importantService.getImportant',{expired=true}) />

		<cfset local.incomplete = [] />
		<cfset local.complete = [] />
		
		<cfloop query="local.lastWeek">
			<cfif not local.lastWeek.complete>
				<cfset local.thisImportant = {
					id=local.lastWeek.id,
					name=local.lastWeek.name,
					completed_on=local.lastWeek.completed_on
				} />
				<cfset arrayAppend(local.incomplete,local.thisImportant) />
			</cfif>
		</cfloop>

		<cfsavecontent variable="local.result">
			<cfif arrayLen(local.incomplete) gt 0>
				<div id="last-weeks-items">
				</br></br>
				<div class="module-left-title"><i style="font-size:14px;" class="fa fa-meh-o"></i>Unfinished Last Week</div>
				<div class="important-message">Do you want another shot at some of these?</div>
				<ul class="checklist old">
					<cfloop array="#local.incomplete#" index="local.i" item="local.item">
						<li importantID="#local.item.id#" complete="true">
							<i class="fa fa-thumbs-o-up" onclick="Important.addOld(this);"></i>
							<i class="fa fa-thumbs-o-down" onclick="Important.removeOld(this);"></i>
							<span class="important-name">#local.item.name#</span>
						</li>
					</cfloop>
				</ul>
				</div>
			</cfif>
		</cfsavecontent>

		<cfreturn local.result />
	
	</cffunction>

	<!--- --->

</cfcomponent>